<template>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 column">
          <div class="card">
            <h5 class="card-header">
              考研信息
              <div class="btn more_btn"
                   type="btn"
                   @click="change_KaoYan">
                More
              </div>
            </h5>
            <div class="card-body">
              <ul class="list-group list-group-flush">
                <li class="list-group-item" v-for="(kaoyan) in kaoyan_info" :key=kaoyan.pee_id>

                  <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:kaoyan.pee_id}}">
                    <a class="" href="javascript:void(0);">{{kaoyan.pee_title}}</a>
                  </router-link>

                  <span class="abs">{{kaoyan.pee_release_time}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 column mt-5">
          <div class="card">
            <h5 class="card-header">
              特别推荐
              <div class="btn more_btn"
                   type="btn"
                   @click="change_Recommend">
                More
              </div>
            </h5>
            <div class="card-body">
              <ul class="list-group list-group-flush">
                <li class="list-group-item" v-for="(recommend) in recommend_info" :key=recommend.pee_id>

                  <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:recommend.pee_id}}">
                    <a class="" href="javascript:void(0);">{{recommend.pee_title}}</a>
                  </router-link>

                  <span class="abs">{{recommend.pee_release_time}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 column mt-5">
          <div class="card">
            <h5 class="card-header">
              招生信息
              <div class="btn more_btn"
                   type="btn"
                   @click="change_ZhaoShen">
                More
              </div>
            </h5>
            <div class="card-body">
              <ul class="list-group list-group-flush">
                <li class="list-group-item" v-for="(zhaoshen) in zhaoshen_info" :key=zhaoshen.pee_id>

                  <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:zhaoshen.pee_id}}">
                    <a class="" href="javascript:void(0);">{{zhaoshen.pee_title}}</a>
                  </router-link>

                  <span class="abs">{{zhaoshen.pee_release_time}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 column mt-5">
          <div class="card">
            <h5 class="card-header">
              考研日报
              <div class="btn more_btn"
                   type="btn"
                   @click="change_Daily">
                More
              </div>
            </h5>
            <div class="card-body">
              <ul class="list-group list-group-flush">
                <li class="list-group-item" v-for="(daily) in daily_info" :key=daily.pee_id>

                  <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:daily.pee_id}}">
                    <a class="" href="javascript:void(0);">{{daily.pee_title}}</a>
                  </router-link>

                  <span class="abs">{{daily.pee_release_time}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import {getNewPeeInfo} from "@/api/Main";


export default {
  name: "Information_main",
  components:{
    myfooter,
    navheader
  },
  data(){
    return{
      kaoyan_info:[],
      daily_info:[],
      recommend_info:[],
      zhaoshen_info:[],
      param: {
        key: '',
        page: 1,
        limit: 5,
      },


    }
  },
  methods:{
    //获取信息
    init(){
      getNewPeeInfo({
        page:this.param.page,
        limit:this.param.limit
      }).then(res=>{

        if(res.data.code==0){
          this.$message.error("res.data.msg");
        }

        //考研资讯
          this.all_info=res.data.all_info;
          this.kaoyan_info=res.data.kaoyan_info;
          this.daily_info=res.data.daily_info;
          this.recommend_info=res.data.recommend_info;
          this.zhaoshen_info=res.data.zhaoshen_info;


      })
    },

    change_KaoYan(){
      if(this.$router.history.current.path !='/KaoYan_Frame/KaoYan_Info'){
        this.$router.push({path:'/KaoYan_Frame/KaoYan_Info'});
      }
    },
    change_ZhaoShen(){
      if(this.$router.history.current.path !='/KaoYan_Frame/ZhaoShen_Info'){
        this.$router.push({path:'/KaoYan_Frame/ZhaoShen_Info'});
      }
    },
    change_Daily(){
      if(this.$router.history.current.path !='/KaoYan_Frame/Daily_Info'){
        this.$router.push({path:'/KaoYan_Frame/Daily_Info'});
      }
    },
    change_Recommend(){
      if(this.$router.history.current.path !='/KaoYan_Frame/Recommend_Info'){
        this.$router.push({path:'/KaoYan_Frame/Recommend_Info'});
      }
    }
  },
  created() {
    let _this=this;

    _this.init();

  }
}
</script>

<style scoped>
.abs {
  /*position: absolute;*/
  float:right;
}
.card-body{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.card-header{
  /*font-weight: bold;*/
  color: black;
  font-size: 22px;
}
/*更多按钮样式*/
.more_btn{
  float:right;
  font-size: 15px;
  background-color:#B7C1AC;
  color: white;
  font-weight: bold;
  border-radius: 10px;
}
.more_btn:hover{
  border-color: #B7C1AC;
  border-width: 2px;
  background-color:white;
  color: #B7C1AC;
}
/*a样式*/
.list-group li a{
  color: #5b5b5b;
  font-size: 18px;
}
.list-group li a:hover{
  color: #057a5b;
}
</style>
